<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
    <title>092-二维码登录</title>
    <style></style>
    <script type="module" crossorigin src="../../../../static/js/092-index.html-c50888e8.js"></script>
    <link rel="modulepreload" crossorigin href="../../../../static/common/modulepreload-polyfill-3cfb730f.js">
    <link rel="modulepreload" crossorigin href="../../../../static/common/easyHash-50f2d0cf.js">
  </head>

  <body>
    <p>
      <a
        href="https://mp.weixin.qq.com/s?__biz=MzI4NjE4NTUwNQ==&mid=2247494135&idx=6&sn=ebd5a617cc970366608b34e29f12de30&chksm=ebe268b9dc95e1afca743a1a610359925d6960919a13f579e42d8d567dd1052cec2f0f8e4449&scene=27"
        target="_blank"
      >
        二维码扫码登录的背后的逻辑
      </a>
    </p>
    <p>扫码登录简要逻辑：</p>
    <ol>
      <li>pc端生成带guid的二维码 - 并轮询服务器当前guid是否登录</li>
      <li>手机端扫码，点击登录将guid和账号发送给服务器</li>
      <li>服务器登录账号，并告知pc端已登录，pc端做登录跳转</li>
    </ol>
    <div class="login">
      <div>
        <canvas id="qrcode"></canvas>
      </div>
      <p id="appUrl"></p>
    </div>
    <div class="home" style="display: none">
      <h2>登录成功</h2>
      <span>账号：</span> <span class="user"></span>
      <br />
      <span>密码：</span> <span class="password"></span>
    </div>
    
  </body>
</html>
